<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>【组件案例】--发表评论</title>
    <script src="../../lib/vue.js"></script>
    <link rel="stylesheet"  href="../../lib/bootstrap.css"></link>
</head>
<body>
    <div id="app">
        <!--引入评论组件-->
        <com @func="getAllInfo" ref="mycom"></com>

        <input type="button" @click="testClick" value="测试ref 调用子组件的方法" />
        <hr/>
        <ul class="list-group">
            <li class="list-group-item" v-for="item in list" :key="item.id">
                <span class="badge">评论人：{{ item.name }}</span>
                {{ item.content }}

            </li>

        </ul>

    </div>

    <!--把评论人。评论内容和发布按钮当成一个组件-->
    <template id="tmp">
        <div>
            <div class="form-group">
                <label>
                    评论人：
                </label>
                <input v-model="username" class="form-control" />

            </div>

            <div class="form-group">
                <label>
                    评论内容：
                </label>
                <textarea v-model="comment" class="form-control" ></textarea>
            </div>

            <div class="form-group">
                <input type="button" @click="postComment"  class="btn btn-primary" value="发表评论" />

            </div>
        </div>
    </template>

    <script>

        //定义组件
        var comment = {
            template:'#tmp',
            data(){
                return {
                    username:"",
                    comment:""
                }
            },
            methods:{
                //组件调用发布评论
                postComment(){
                    //利用localStorage（特性:存储的时候只能存string，所以需要把对象转成string对象）

                    //1.获取localStorage中字符串，再转成数组对象(由于获取localStorage可能为空，所以给定默认返回值)
                    var arr = JSON.parse(localStorage.getItem('cmts') || '[]');

                    //2.把子组件中输入的评论人和评论拼成一个对象，放到数组对象中
                    var obj = {id: Date.now(),name:this.username,content:this.comment};

                    //3.把数组对象再转成字符串对象，存到localStorage中
                    //使用unshift让对象始终在第一位
                    arr.unshift(obj);
                    var jsonStr = JSON.stringify(arr);
                    localStorage.setItem("cmts",jsonStr);

                    //4.清空本组件的评论人和评论值
                    this.username = this.comment = '';

                    //5.页面获取最新值，即动态刷新，就要调用父组件的getAllInfo方法
                    //子组件调用父组件的防范
                    this.$emit('func');
                },
                childClick(){
                    console.log("子组件测试调用方法")
                }
            }
        }

        var vue = new Vue({
            el : '#app',
            data:{
                list:[
                    {id: Date.now(), name: '顺溜', content: '我的名字叫顺溜'},
                    {id: Date.now(), name: 'mercury', content: 'mercury keep coding'}
                ]
            },
            methods:{
                getAllInfo(){
                    var arr = JSON.parse(localStorage.getItem('cmts') || '[]');
                    this.list = arr;
                },
                testClick(){
                    //other:测试下ref,调用自定义组件的方法
                    this.$refs.mycom.childClick();

                }
            },
            created(){ //在加载后，获取localstorage中的数据
                this.getAllInfo();
            },
            //定义私有组件
            components:{
                com:comment
            }
        })
    </script>
</body>
</html>